// 导入lazy和Suspense 作用是懒加载
import  { lazy, Suspense } from 'react';
import { Spin } from 'antd';
// 定义懒加载函数 url是传入的路径
function LazyLoad(url:string) {
  // lazy函数接受一个函数作为参数，这个函数需要返回一个Promise对象
  const Element = lazy(() =>{
    // 返回一个Promise对象
    return new Promise((resolve) => {
      // 动态导入组件
      import('../'+url)
      .then(res=>resolve(res))
      // 如果导入失败，就加载Error组件
      .catch(err=>{
        console.log(err,"加载失败")
        resolve(import('../views/'+'Error'))
      })
   
    })
  });
  return <Suspense fallback={<div style={{position:"fixed",left:"50%",top:"50%",transform:'translate(-50%,-50%)'}}>
    <Spin tip="加载中..." size="small"></Spin></div>}><Element/></Suspense>
}

export default LazyLoad;